<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/default.xhtml">
	
	<f:metadata>
		<f:viewParam
			name="type_id" 
			value="#{userTaskListBean.taskTypeId}" />
		<f:event
			type="preRenderView"
			listener="#{userTaskListBean.load(currentUser)}" />
	</f:metadata>
	
	<ui:define name="content">

		<h:form id="userTaskListForm" rendered = "#{login.loggedIn}">
			
	  
			<table>
			<tr>
			<td><h:outputText value="Tasktype filter: " /></td>
	        <td><p:selectOneMenu value="#{userTaskListBean.taskTypeId}">
	            <f:selectItem itemLabel="No filter" itemValue="0" ></f:selectItem>
	            <f:selectItems value="#{userTaskListBean.loadTaskTypes(currentUser)}" var="tt"
	            		itemLabel="#{tt.name}" itemValue="#{tt.id}"> </f:selectItems>
	            <p:ajax update="userTaskTable, countDone, countTodo, pbar" />
	        </p:selectOneMenu></td>
			</tr>	
			<tr>
			<td><h:outputLabel for="name" value="COMPLETED tasks:" /></td>
			<td><h:outputLabel for="name" id="countDone" value="#{userTaskListBean.getUserDoneCount(currentUser)}" /></td>
			</tr>
			<tr>
			<td><h:outputLabel for="name" value="TODO tasks remain:" /></td>
			<td><h:outputLabel for="name" id="countTodo" value="#{userTaskListBean.getUserTodoCount(currentUser)}" /></td>
			</tr>
			</table>
			<br />
			 <p:progressBar id="pbar" value="#{userTaskListBean.getCompletedPercent(currentUser)}" labelTemplate="{value}%" displayOnly="true" style="width: 250px"/>
			
			<br/>
	
			<p:dataTable 
				id="userTaskTable"
				value="#{userTaskListBean.usertasks}"			
				var="ut"
				style="width: 50%">
				
				
				<p:column>
					<f:facet name="header">Task</f:facet>
					<h:outputText value="#{ut.task.name}" />
				</p:column>
				
				<p:column>
					<f:facet name="header">Task state</f:facet>
					<h:outputText value="#{ut.state ? 'DONE' : 'TODO'}" />
				</p:column>
				
				<p:column>
					<f:facet name="header">Operations</f:facet>
					<p:button 
						value="Edit" 
						outcome="/content/usertask/edit">
						<f:param name="id" value="#{ut.id}" />
					</p:button>
				</p:column>
			
			</p:dataTable>
			<br />
			<p:button
				value="Create new"
				outcome="/content/usertask/edit" />
		</h:form>

	</ui:define>
</ui:composition>
